<template>
  <div class="w-[450px] h-full px-12 py-5 flex flex-col justify-center items-center bg-white">
    <div class="w-full flex justify-between items-center">
      <!-- <span class="text-3xl py-10">{{ title }}</span> -->
      <span class="text-3xl py-10 tracking-[15px] font-semibold">登录</span>
      <span class="tracking-widest text-[13px]">
        暂无账号?<a class="text-orange-300 hover:text-orange-500 cursor-pointer underline "
          @click="emit('goRegister')">点我注册</a>
      </span>
    </div>
    <div class="w-full">
      <login-form />
      <div class="w-full flex justify-between">
        <span class="flex justify-start items-center cursor-pointer hover:text-orange-500 text-[13px]"
          @click="emit('goPhone')">
          <el-icon>
            <Iphone size="13px" />
          </el-icon>
          手机短信登录
        </span>
        <a class="cursor-pointer text-gray-500 hover:text-orange-500 text-[13px]"
          @click="router.push('/findPwd')">已有账号,忘记密码？</a>
      </div>
      <el-divider>
        其他方式登录
      </el-divider>
      <div class="w-full h-16 flex justify-center items-center">
        <img class="w-8 h-8 mx-3 cursor-pointer" src="../../../assets/img/qq.svg" alt="" fit="fill" @click="qqLogin">
        <img class="w-8 h-8 mx-3 cursor-pointer" src="../../../assets/img/wx.svg" alt="" fit="fill" @click="wxLogin">
      </div>
      <div class="w-full h-4 text-[13px] flex justify-end items-center">暂不登录,<a
          class=" cursor-pointer hover:text-orange-500" @click="router.push('/')">游客进入</a></div>
    </div>
  </div>
</template>

<script setup>
import { Iphone } from '@element-plus/icons-vue'
import LoginForm from './LoginForm.vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const emit = defineEmits(['qqLogin', 'wxLogin', 'goPhone', 'goRegister'])
const qqLogin = () => {
  ElMessage({
    message: '开发中~~~🍎🍎🍎',
    grouping: true,
    type: 'info',
  })
}
const wxLogin = () => {
  ElMessage({
    message: '开发中~~~🍎🍎🍎',
    grouping: true,
    type: 'info',
  })
}
</script>
